<template>
	<view>
		<view :style="{'height':statusBarHeight+ 47 + 'px'}"></view>
		<image class="beijingimg" src="../../static/gimg/m7.png" mode=""></image>
		<view class="top dingwei">
			<view class="dingwei">
				<image class="top_img dingwei" src="../../static/gimg/m6.png" mode=""></image>
				<view class="gerenxinxi">
					<view class="left">
						<image src="../../static/basicprofile.png" mode=""></image>
						<view>
							<span>{{users.nickName}}</span>
							<p>ID:{{users.userId}}</p>
						</view>
					</view>
					<view class="right">
					</view>
				</view>
			</view>
			<view class="tui dingwei" @click="tuichu">
				退出登录
			</view>
		</view>

		<view class="neir">
			<view class="yue" @click="yue" v-if="zhanghuyue">
				<view class="left">
					<image class="qian" src="../../static/gimg/y1.png" mode=""></image>
					<image class="yueimg" src="../../static/gimg/y2.png" mode=""></image>
				</view>
				<view class="con">
					<view class="conbox">
						<span>￥{{allprice}}</span>
						<p>总计收益</p>
					</view>
					<view class="conbox1">
						<span>余额可用来下单支付使用，也可以提现</span>
					</view>
				</view>
				<view class="right">
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<li @click="dingdan">
				<view class="left">
					<image src="../../static/gimg/m4.png" mode=""></image>
					<span>我的订单</span>
				</view>
				<view class="right">
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</li>
			<li @click="dizhiguanli">
				<view class="left">
					<image src="../../static/gimg/m2.png" mode=""></image>
					<span>地址管理</span>
				</view>
				<view class="right">
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</li>
			<li @click="xiu">
				<view class="left">
					<image src="../../static/gimg/m5.png" mode=""></image>
					<span>修改密码</span>
				</view>
				<view class="right">
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</li>
			<li @click="lianxi">
				<view class="left">
					<image src="../../static/gimg/m3.png" mode=""></image>
					<span>联系我们</span>
				</view>
				<view class="right">
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</li>
			<li @click="yijian">
				<view class="left">
					<image src="../../static/gimg/m1.png" mode=""></image>
					<span>意见反馈</span>
				</view>
				<view class="right">
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</li>
		</view>


		<uni-popup ref="popup" type="center">
			<view class="tanchu" v-for="(item,index) in dianhua" :key="index">
				<image src="../../static/gimg/m9.png" mode=""></image>
				<view class="name">
					{{item.title}}
				</view>
				<view class="dianhua">
					{{item.content}}
				</view>
				<button @click="dadianhua">立即拨打</button>
			</view>
		</uni-popup>
		<uv-tabbar :value="2"  class="tab"></uv-tabbar>
	</view>
</template>

<script>
	import {
		listabout,getwallet
	} from '../../common/http.api.js'
	export default {
		data() {
			return {
				statusBarHeight:uni.getStorageSync('heights'),
				value: 2,
				zhanghuyue: false,
				dianhua: [],
				users:{},
				allprice:''
			}
		},
		onShow() {
			getwallet().then(res=>{
				this.allprice = res.data.amount
			})
		},
		onLoad() {
			let user = uni.getStorageSync('name')
			if (user == 1) {
				this.zhanghuyue = true
			} else {
				this.zhanghuyue = false
			}
			this.users = uni.getStorageSync('user')
		},
		methods: {
			tuichu() {
				uni.reLaunch({
					url: './login'
				})
				uni.clearStorage()
			},
			jump(index) {
				this.value = index
				if (index == 0) {
					uni.reLaunch({
						url: './home'
					})
				} else if (index == 1) {
					uni.reLaunch({
						url: './store'
					})
				}
			},
			yue() {
				uni.navigateTo({
					url: '/pages/geren/zhanghuyue'
				})
			},
			dizhiguanli() {
				uni.navigateTo({
					url: '/pages/dizhi/dizhilist'
				})
			},
			yijian() {
				uni.navigateTo({
					url: '/pages/geren/yijianfankui'
				})
			},
			xiu() {
				uni.navigateTo({
					url: '/pages/geren/xiupass'
				})
			},
			lianxi() {
				this.$refs.popup.open('center')
				let arr = {}
				listabout(arr).then(res => {
					this.dianhua = res.rows
				})
			},
			dingdan() {
				uni.navigateTo({
					url: '/pages/dingdan/dingdanlist'
				})
			},
			dadianhua() {
				uni.makePhoneCall({
					phoneNumber: this.dianhua[0].content
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yue {
		width: 643rpx;
		height: 94rpx;
		background-image: linear-gradient(90deg, #fdedd1 0%, #f3d6a5 100%);
		border-radius: 20rpx;
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			flex-direction: column;
			align-items: center;

			.qian {
				width: 50rpx;
				height: 50rpx;
			}

			.yueimg {
				width: 95rpx;
				height: 23rpx;
				margin-top: 10rpx;
			}
		}

		.con {
			display: flex;
			flex-direction: column;

			.conbox {
				display: flex;

				span {
					font-family: PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #6E3F18;
					line-height: 48rpx;
					margin-right: 10rpx;
				}

				p {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #6E3F18;
					line-height: 48rpx;
				}
			}

			.conbox1 {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #6E3F18;
				line-height: 48rpx;
			}
		}
	}

	.tanchu {
		width: 534rpx;
		height: 493rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.name {
			padding-top: 150rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #161616;
			line-height: 33rpx;
		}

		button {
			width: 339rpx;
			height: 64rpx;
			background: linear-gradient(84deg, #24180D 0%, #594629 100%);
			border-radius: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 33rpx;
		}

		.dianhua {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 35rpx;
			color: #161616;
			line-height: 33rpx;
			margin: 50rpx 0rpx;
		}

		image {
			position: absolute;
			top: -100rpx;
			right: 35%;
			width: 185rpx;
			height: 185rpx;
		}
	}

	.neir {
		position: absolute;
		z-index: 1;
		margin-top: 320rpx;
		margin-left: 30rpx;
		image {
			width: 45rpx;
			height: 45rpx;
			margin-right: 10rpx;
		}



		li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 681rpx;
			height: 100rpx;
			border-bottom: 1px solid #EEEEEE;
			margin-top: 10rpx;

			.left {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
			}
		}

	}

	.tui {
		z-index: 99;
		margin-top: 200rpx;
		width: 611rpx;
		height: 67rpx;
		border-radius: 33rpx;
		border: 1px solid #E4C085;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #E4C085;
		margin-left: 36rpx;
	}

	.dingwei {
		position: absolute;
		z-index: 1;
	}

	.top {
		width: 683rpx;
		margin-left: 35rpx;
	}

	.gerenxinxi {
		position: absolute;
		z-index: 99;
		display: flex;
		width: 643rpx;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 20rpx;

		.left {
			display: flex;
			align-items: center;

			view {
				span {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 34rpx;
					color: #FEFEFE;
				}

				p {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FEFEFE;
					opacity: 0.63;
					margin-top: 10rpx;
				}
			}

			image {
				width: 115rpx;
				height: 114rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}

		.right {
			image {
				width: 160rpx;
				height: 43rpx;
			}
		}
	}

	.top_img {
		width: 683rpx;
		height: 303rpx;
		z-index: 2;

	}

	.beijingimg {
		  position: fixed;//使用粘滞定位 实际可以根据情况调整，不要拘泥于一种定位
		  left: 0;
		  bottom: 0;
		  display: block;
		  width: 100%;
		  height: 100%;
		  z-index: -999;
	}


	.icon {
		width: 43rpx !important;
		height: 43rpx !important;
	}
</style>